<template>
  <div class="container">
    <el-table
      :data="tableData"
      :header-cell-style="{
        background: '#f2f3f4',
        color: '#555',
        'font-weight': 'bold',
        'line-height': '32px',
      }"
      border
      style="width: 100%"
    >
      <el-table-column prop="title" label="考试标题" />
      <el-table-column prop="userName" label="真实姓名" width="180" />
      <el-table-column prop="companyName" label="公司名" width="180" />
      <el-table-column prop="date" label="得分" width="180">
        <template slot-scope="scope">
          {{ scope.row.userScore }} / {{ scope.row.totalScore }}
        </template>
      </el-table-column>
      <el-table-column
        prop="totalTime"
        label="考试时长 (单位:分钟)"
        width="180"
      />
      <el-table-column prop="userTime" label="用户时长 (单位:分钟)" />
      <el-table-column prop="updateTime" label="提交时间" />
    </el-table>
    <div style="display: flex; justify-content: right;margin-top: 10px;">
      <el-pagination
        :current-page.sync="page.pageNum"
        :page-size="10"
        :total="totalItem"
        background
        layout="prev, pager, next"
        @current-change="currentOilMaxPage"
      />
    </div>
  </div>
</template>

<script>
import { allPaging } from '@/api/qu/repo'
export default {
  name: '',
  components: {},
  filters: {},
  props: {},
  data() {
    return {
      tableData: [],
      page: {
        pageSize: 10,
        pageNum: 1
      },
      totalItem: null
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getAllPage()
  },
  mounted() {},
  methods: {
    async getAllPage() {
      const res = await allPaging({
        pageNum: this.page.pageNum,
        pageSize: 10
      })
      console.log(res)
      this.tableData = res.data.list
      this.totalItem = res.data.total
    },
    currentOilMaxPage(pageNum) {
      this.page.pageNum = pageNum

      this.getAllPage()
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
}
</style>
